<!--  -->
<template>
  <div id="cart">
      <navbar class="cart-nav"><template v-slot:center><div>购物车({{info_num}})</div></template></navbar>
      <BScroll class="content" ref="scroll">
        <cartinfo></cartinfo>
      </BScroll>
      <cartbottombar @payClick="payClick"/>
      <toast :message="message" :isshow="isshow"/>
  </div>
</template>

<script>
import navbar from 'components/common/navbar/NavBar.vue'
import cartinfo from './childComps/CartInfo.vue'
import cartbottombar from './childComps/CartBottomBar.vue'
import toast from 'components/common/toast/Toast.vue'

import BScroll from 'components/common/bscroll/BScroll.vue'
export default {
  data () {
    return {
      message:'',
      isshow:false
    }
  },
  components:{
    BScroll,
    navbar,
    cartinfo,
    cartbottombar,
    toast
  },
  activated() {
    this.$refs.scroll.refresh()
  },
  computed:{
    info_num() {
      return this.$store.state.car_info.length;
    }
  },
  methods:{
    payClick() {
        if(this.$store.state.car_info.filter(item => item.checked).length){

        }else {
          this.message = '您还未选择商品'
          this.isshow = true

          setTimeout(() => {
            this.message = ''
            this.isshow = false
          },1500)
        }
    }
  }
}
</script>

<style  scoped>
  .content{
    position: absolute;
    top: 44px;
    left: 0;
    height: calc(100vh - 142px);
    overflow: hidden;
    background-color: #eee;
  }
  .cart-nav{
    color: #fff;
    font-size: 16px;
    background-color: var(--color-tint);
  }
</style>
